<template>
    <div class="layout-content">
        <div class="layout-content-main">
            <Breadcrumb class="content-title mbt1">
                <BreadcrumbItem>用户管理</BreadcrumbItem>
            </Breadcrumb>

            <div class="section-special">
                <Row style="height:100%">
                    <!-- 左侧 -->
                    <Col span="6" class="section-left">

                        <el-input
                            placeholder="请输入部门名称"
                            v-model="filterText" class="mbt2">
                        </el-input>     

                        <el-tree
                            class="filter-tree"
                            :data="treeData"
                            :props="defaultProps"                            
                            :filter-node-method="filterNode"
                            :render-content="renderContent"
                            :expand-on-click-node=false
                
                            ref="tree1" style="border:none" @node-click="treeItemClick">
                        </el-tree>

                    </Col>
                    <!-- 右侧 -->
                    <Col span="18-10px" class="section-right">
                    <Breadcrumb class="rightName mbt2">

                        <BreadcrumbItem>{{treeInfo.title}}</BreadcrumbItem>
                    </Breadcrumb>
                    <Row class="mbt2 text-right">
                        <Col span="8">
                        <Input placeholder="请输入员工名称" v-model="searchValue">

                        <Button slot="append" icon="ios-search" @click="searchEmployee()"></Button>
                        </Input>
                        </Col>
                        <Col span="12" offset="4">
                        <Button type="primary" size="large" @click="downloadTemplate()">下载导入模板</Button>
                        <Upload :headers="{Authorization:`bearer ${this.$store.state.account.token}`}" :action="importUser" class="upload" style="display:inline-block" 
                        :on-success="uploadTempleatSuccess" :on-error="uploadError" :format="['xlsx','xls']" :max-size="5120" :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize" :show-upload-list=false>
                            <Button type="ghost" size="large" class="import-btn">导入</Button>
                        </Upload>
                        <Button type="primary" size="large" @click="addEmployeeModal=true">添加员工信息</Button>                       
                        </Col>
                    </Row>  
                    <!-- 表格start -->
                    <Table border :columns="columns7" :data="employeeList" class="mbt4"></Table>

                    <!-- 表格end -->
                    <Page :total="employeeListLength"  class="center" @on-change="changePage" show-total :page-size="5"></Page>
                     <!-- 添加员工信息弹框start -->
                        <Modal v-model="addEmployeeModal" class="employeeModal" title="添加员工信息" :loading="loading">
                            <Form label-position="right" :label-width="100" ref="employeeInfo"  :model="employeeInfo" :rules="ruleValidate">
                                <Row>
                                    <Col Col span="11">
                                    <FormItem label="头像:" class="headerPic">

                                        <img :src="employeeInfo.headImage?getFastUrl+employeeInfo.headImage:''" alt="" v-if="employeeInfo.headImage">
                                        <img src="../../assets/images/headphoto_default_pic.png" alt="" v-else>
                                        <!-- <Button style="float:left;" class="upload-userPic">点击上传</Button> -->
                                        <Upload  :headers="{Authorization:`bearer ${this.$store.state.account.token}`}"
 :action="uploadPath" :format="['jpg','jpeg','png']"
        :max-size="2048" :on-format-error="picFormatError" :on-success="uploadPicSuccess" :show-upload-list=false>
                                            <Button class="upload-userPic" type="ghost">点击上传</Button>
                                        </Upload>
                                    </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                   <Col span="11">
                                    <FormItem label="姓名:" prop="userName">
                                        <Input :maxlength="20" v-model="employeeInfo.userName"></Input>
                                    </FormItem>
                                    </Col>
                                    <Col span="11">
                                    <FormItem label="工号:" prop="jobNumber">
                                        <Input :maxlength="50" v-model="employeeInfo.jobNumber"></Input>
                                    </FormItem>
                                    </Col>

                                    <Col span="11">
                                    <FormItem label="性别:" prop="sex">
                                        <Select placeholder="请选择" v-model="employeeInfo.sex">   
                                                                                                
                                            <Option value="男">男</Option>
                                            <Option value="女">女</Option>
                                        </Select>
                                    </FormItem>
                                    </Col>
                                    <Col span="11">
                                    <FormItem label="手机:" prop="phone">
                                        <Input v-model="employeeInfo.phone"></Input>
                                    </FormItem>
                                    </Col>                                  
                                    <Col span="11">
                                    <FormItem label="职位:" prop="position">
                                        <Input :maxlength="20" v-model="employeeInfo.position"></Input>
                                    </FormItem>
                                    </Col>
                                    <Col span="11">
                                    <FormItem label="邮箱:" prop="email">
                                        <Input v-model="employeeInfo.email"></Input>
                                    </FormItem>
                                    </Col>
                                    <Col span="11">

                                    <FormItem label="所属部门:" prop="departmentId">
                                        <!-- <Input v-model="employeeInfo.department"></Input> -->
                                        <Cascader :data="treeData" change-on-select @on-change="chooseDeparment" v-model="selectDeparmentList"></Cascader>
                                        
                                    </FormItem>
                                    </Col>
                                    <Col span="11">
                                    <FormItem label="直属上级:">
                                        <!-- <Input v-model="employeeInfo.superiorUserId"></Input> -->
                                        <Select v-model="employeeInfo.superiorUserId">
                                          <Option :value="item.userId" :key="item.userId" v-for="item in deparentPeopleList">{{item.userName}}</Option>
                                          
                                        </Select>
                                    </FormItem>
                                    </Col>                                   
                                    <!-- <Col class="userDefined-footer" span="24">
   
                                      <Button @click="addEmployeeModal=false">取消</Button>
                                       <Button type="primary" @click="submitEmployee('employeeInfo')">提交</Button>
                                    </Col> -->
                                </Row>
                          </Form>
                          <div slot="footer">
                             <Button @click="addEmployeeModal=false">取消</Button>
                             <Button type="primary" @click="submitEmployee('employeeInfo')">保存</Button>

                          </div>
                        </Modal>
                        <!-- 添加员工信息弹框end -->
                    <!-- 部门管理弹框start -->
                    <Modal v-model="manageDepartmentModal" class="manageDepartment"   ok-text="选好了">
                         <el-input
                            placeholder="请输入部门名称"
                            v-model="filterText2" class="mbt2">
                        </el-input>     

                        <el-tree                           
                            class="filter-tree"                           
                            :data="treeData"                         
                            :props="defaultProps"                               
                            node-key="departmentId"                                          
                            :filter-node-method="filterNode"                                                     
                            :expand-on-click-node=false                                                                            
                            show-checkbox
                            ref="tree2" style="border:none">
                        </el-tree>
                      <Row>
<!-- 
                        <Col class="userDefined-footer mtp2" span="24">
                          <Button @click="manageDepartmentModal=false">取消</Button>
                          <Button type="primary" @click="getCheckedNodes">保存</Button>
                        </Col> -->
                      </Row>
                      <div slot="footer">
                        <Button @click="manageDepartmentModal=false">取消</Button>
                        <Button type="primary" @click="getCheckedNodes">保存</Button>
                      </div>

                    </Modal>
                    <!-- 部门管理弹框end -->

                    <!-- 所属角色弹框start -->
                    <Modal v-model="roleModal" title="所属角色" class="role">

                        <Row>
                            <Col>
                            <!-- 已选择角色 -->
                            <span class="selectedRole">已选择角色</span>
                            <ul class="role-box">
                                <li :key="item.roleId" v-for="(item,index) in roleInfoList"  class="role-item">
                                    <Button>{{item.roleName}}</Button>
                                    <Icon type="close-circled" class="close-icon" @click.native="removeRole(index,item)"></Icon>
                                </li>
                            </ul>

                            </Col>

                        </Row>

                        <Row>
                            <Col>
                            <!-- 所有角色 -->
                            <span class="all-role">未选择角色</span>
                            <ul class="role-box">
                                <li :key="item.roleId" v-for="(item,index) in noRoleInfos" @click="chooseRole(index,item)" class="role-item">
                                    <Button>{{item.roleName}}</Button>

                                </li>
                            </ul>

                            </Col>
                        </Row>
                        <div slot="footer">
                          <Button @click="roleModal=false">取消</Button>
                          <Button type="primary" @click="saveRole()">保存</Button>

                        </div>
                    </Modal>

                    <!-- 所属角色弹框end -->
                    <!-- 查看并编辑弹框start -->
                    <Modal v-model="editEmployeeModal" class="employeeModal" title="编辑员工信息" :loading="loading">
                        <Form label-position="right" :label-width="100" ref="userInfo"  :model="userInfo" :rules="ruleValidate">
                         
                            <Row>
                                <Col Col span="11">
                                <FormItem label="头像:" class="headerPic">

                                    <img :src="userInfo.headImage?getFastUrl+userInfo.headImage:''" alt="" v-if="userInfo.headImage">
                                    <img src="../../assets/images/headphoto_default_pic.png" alt="" v-else>
                                    <!-- <Button style="float:left;" class="upload-userPic">点击上传</Button> -->
                                    <Upload :headers="{Authorization:`bearer ${this.$store.state.account.token}`}"
 :action="uploadPath" :on-format-error="picFormatError" :on-success="editUploadPicSuccess"  :format="['jpg','jpeg','png']"
        :max-size="2048" :show-upload-list=false>
                                        <Button class="upload-userPic" type="ghost">点击上传</Button>
                                    </Upload>
                                </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="11">
                                <FormItem label="姓名:" prop="userName">
                                    <Input v-model="userInfo.userName"></Input>
                                </FormItem>
                                </Col>
                                <Col span="11">
                                <FormItem label="工号:" prop="jobNumber">
                                    <Input :maxlength="50" v-model="userInfo.jobNumber"></Input>
                                </FormItem>
                                </Col>
                                 </Row>

                                <Row>
                                <Col span="11">
                                <FormItem label="性别:" prop="sex">
                                    <Select placeholder="请选择" v-model="userInfo.sex">
                                        <Option value="男">男</Option>
                                        <Option value="女">女</Option>
                                    </Select>
                                </FormItem>
                                </Col>
                                <Col span="11">
                                <FormItem label="手机:" prop="phone">
                                    <Input v-model="userInfo.phone"></Input>
                                </FormItem>
                                </Col>
                                </Row>

                                <Row>
                                <Col span="11">
                                <FormItem label="职位:" prop="position">
                                    <Input v-model="userInfo.position"></Input>
                                </FormItem>
                                </Col>
                                <Col span="11">
                                <FormItem label="邮箱:" prop="email">
                                    <Input v-model="userInfo.email"></Input>
                                </FormItem>
                                </Col>
                                </Row>

                                <Row>
                                <Col span="11" prop="departmentId">
                                <FormItem label="所属部门:" class="teshu" >
                                   <Cascader :data="treeData" change-on-select @on-change="editChooseDeparment"  v-model="editSelectList"></Cascader>
                                </FormItem>
                                 
                                </Col>
                                <Col span="11">
                                    <FormItem label="直属上级:">
                                          <!-- <Input v-model="employeeInfo.superiorUserId"></Input> -->
                                          <Select v-model="userInfo.superiorUserId">
                                             
                                            <Option :value="item.userId" :key="item.userId" v-for="item in deparentPeopleList">{{item.userName}}</Option>
                                            
                                          </Select>
                                      </FormItem>
                                </Col>
                        
                            </Row>

                        </Form>
                        <div slot="footer">
                          <Button @click="editEmployeeModal=false">取消</Button>
                          <Button type="primary" @click="submitEmployee('userInfo')">保存</Button>

                        </div>
                    </Modal>

                    <!-- 查看并编辑弹框end-->
                    </Col>

                </Row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree1.filter(val);
    },
    filterText2(val) {
      this.$refs.tree2.filter(val);
    }
  },
 created(){

 },
  mounted() {
    this.getTreeList();
    
    
  },
  data() {
    const phoneValidat = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        if (!/^1[34578]\d{9}$/.test(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      }, 100);
    };
    const deparmentId = (rule,value,callback)=>{
      if (value == "") {
        callback(new Error("所属部门不能为空"));
      }
    }

    return {
      flag:false,
      //上传头像的接口路径
      uploadPath:this.urlPath+"file/upload",
      //下载excel的接口路径
      downlPath:this.urlPath+"user/downloadTmp",
      //上传excel的接口路径
      importUser:this.urlPath+"user/importUserInfo",
      selectDeparmentList: [],
      editSelectList:[],
      checkedDeparmentId:[],
      employeeList: [],
      filterText2:'',
      searchValue: "",
      roleUserId:"",
      editUserId:'',
      manageDepartmentId:'',
      selectedRoleId:[],
      showSelectedRoleId:[],
      userInfo:{},      
      employeeListLength: 0,
      loading: true,
      filterText: "",
      treeData: [],
      pageNum: 1,
      rowsNum: 9,
      deparentPeopleList: [], //添加员工信息时的查询部门员工列表
      treeInfo: "",
      headImage: "",
      getFastUrl: localStorage.getItem("fastUrl"),
      addEmployeeModal: false,
      manageDepartmentModal: false,
      roleModal: false,
      editEmployeeModal: false,
      employeeInfo: {
        headImage: "",
        userName: "",
        jobNumber: "",
        sex: "",
        phone: "",
        position: "",
        email: "",
        superiorUserId: "",
        departmentId: "",
        field1:'',

      },
      noRoleInfos:[],
      roleInfoList:[],
    
      ruleValidate: {
        // headImage:[
        //     { required: true, message: '头像不能为空',  }

        // ],
        userName: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        jobNumber: [{ required: true, message: "工号不能为空", trigger: "blur" }],
        phone: [
          { required: true, validator: phoneValidat, trigger: "blur" }
        ],
        position: [{ required: true, message: "职位不能为空", trigger: "blur" }],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { type: "email", message: "邮箱格式不正确", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        superiorUserId: [
          { required: true, message: "所属上级不能为空", trigger: "change" }
        ],

        departmentId: [
          { required: true, message: "所属部门不能为空", trigger: "change" }
        ]
      },
   

      columns7: [
        {
          title: "序号",
          align: "center",
          width: 80,
          type: "index"
        },
        {
          title: "工号",
          align: "center",
          key: "jobNumber"
        },
        {
          title: "姓名",
          align: "center",
          key: "userName"
        },
        {
          title: "性别",
          align: "center",
          key: "sex"
        },
        {
          title: "职位",
          align: "center",
          key: "position"
        },
        {
          title: "部门",
          align: "center",
          key: "departmentName",
          render: (h, params) => {
            if (params.row.departmentName == null) {
              return "暂无";
            }else{
              return params.row.departmentName
            }
          }
        },
        {
          title: "操作",
          width: 300,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.manageDepartmentModal = true;
                      this.manageDepartmentId =  params.row.userId;

                      this.getUserManagerDeparment(params).then((state)=>{
                          this.setCheckedKeys()
                      })                            
                    }
                  }
                },
                "管理部门"
              ),
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                     //console.log(params)
                      this.roleModal = true;
                      this.getUserRoleList(params);
                      this.roleUserId = params.row.userId;
                    }
                  }
                },
                "所属角色"
              ),
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {                  
                      this.editEmployeeModal = true;
                      this.editUserId = params.row.userId                                        
                      this.getserInfo(params.row.userId).then((state)=>{
                      this.showSuperiorUser(this.userInfo.departmentId)
                      }) 
                    }
                  }
                },
                "查看并编辑"
              ),

              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          order: 1,
          number: 11,
          name: "王小明",
          sex: "男",
          position: "经理",
          section: "软件开发部",
          flag: true
        },
        {
          order: 2,
          number: 12,
          name: "王小明",
          sex: "男",
          position: "项目经理",
          section: "软件开发部",
          flag: true
        },
        {
          order: 3,
          number: 13,
          name: "王小明",
          sex: "女",
          position: "主管",
          section: "软件开发部",
          flag: false
        },
        {
          order: 4,
          number: 14,
          name: "王小明",
          sex: "男",
          position: "员工",
          section: "软件开发部",
          flag: false
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  computed: {
  
  },
  methods: {
    //获取树形数据
    getTreeList() {
      
      this.$ajax
        .post("/api/department/selectAllTree")
        .then(response => {
          // console.log(response.data);
          if (response.data.code == 1) {
            this.treeData = response.data.resdata;
          } else {
            this.$Modal.error({
              title: "错误",
              content: response.data.msg
            });
          }
        })
        .catch(error => {
          this.$Modal.error({
            title: "错误",
            content: error
          });
        });
    },
    //自定义渲染树状节点内容
     renderContent(h, { node, data, store }) {
      // console.log(data.sum)
      
        return h(
          'span',node.label+'('+data.sum+')',
              {
                style:{
                    fontSize: '14px',
                    color:'#f00'
                }
              }

          );
      },
    //点击树形菜单的回调函数
    treeItemClick(data) {
      this.treeInfo = data;
      this.getEmployeeList(this.pageNum, this.rowsNum, "");
    },
    //点击左侧菜单查询员工列表
    getEmployeeList(pageNum, rowsNum, searchValue) {
      return new Promise((resolve, reject) => {
        this.$ajax
          .post(
            "/api/user/selectByDepartmentId",
            `departmentId=${this.treeInfo
              .departmentId}&page=${pageNum}&rows=${rowsNum}&searchKey=${searchValue}`
          )
          .then(response => {
           // console.log(response.data);
            
            if (response.data.code == 1) {
              this.employeeList = response.data.resdata.list;
              this.employeeListLength = response.data.resdata.total;
            } else {
              this.$Modal.error({
                title: "错误",
                content: response.data.msg
              });
            }
          })
          .catch(error => {
            this.$Modal.error({
              title: "错误",
              content: error
            });
          });
      });
    },
    //通过员工名称搜索员工
    searchEmployee() {
      this.getEmployeeList(this.pageNum, this.rowsNum, this.searchValue);
      //console.log(this.path)
    
    },
    //上传图片
    uploadPicSuccess(response) {
      //  console.log(response)
      if (response.code == 1) {
        this.employeeInfo.headImage = response.resdata.uploadURL;
      } else if (response.code == -1) {
        this.$store.commit("LOGOUT");
        this.$router.push({ path: "/login" });
      }
    },
    editUploadPicSuccess(response){
      if (response.code == 1) {
        this.userInfo.headImage = response.resdata.uploadURL;
      } else if (response.code == -1) {
        this.$store.commit("LOGOUT");
        this.$router.push({ path: "/login" });
      }
    },
    //下载导入模板
    downloadTemplate(){
      window.open(this.downlPath,"_self")
      
    },

    //获取选择部门的id
    chooseDeparment(value) {
      // console.log(value)
       
      this.employeeInfo.departmentId = value[value.length - 1];
      this.getDeparentPeopleList(this.employeeInfo.departmentId)
    },
    //回显所属上级
    showSuperiorUser(oldDepartmentId){
      this.getDeparentPeopleList(oldDepartmentId)
    },

    editChooseDeparment(value){
      this.userInfo.departmentId = value[value.length - 1];
      this.getDeparentPeopleList(this.userInfo.departmentId)
     
    },
    //获取用户角色列表
    getUserRoleList(params){
      this.$ajax.post("/api/userRoleLink/info/qeruyRoleInfo",`userId=${params.row.userId}`)
      .then(response=>{
        //console.log(response)
        if(response.data.code==1){
          this.noRoleInfos = response.data.resdata.noRoleInfos;
          this.roleInfoList = response.data.resdata.roleInfoList;
        }else{
          this.$Modal.error({
              title: "错误",
              content: response.data.msg
          });
        }
      }).catch(error=>{
        this.$Modal.error({
              title: "错误",
              content: error
          });
      })

    },
    //保存用户选择的角色
    saveRole(params){
      this.roleInfoList.forEach((item)=>{
        //console.log(item.roleId)    
        this.selectedRoleId.push(item.roleId)
         
                
      });

      var str = this.selectedRoleId.join(",")    
      if(str==''){
        //this.$Message.error("所属角色不能为空");
          this.$Modal.error({
              title: "错误",
              content: "所属角色不能为空"
          });
        return false;
      }
     
    this.$ajax.post("/api/userRoleLink/info/saveRoleLink",`userId=${this.roleUserId}&roleIds=${str}`)
    .then(response=>{
    //  console.log(response)
      if(response.data.code==1){
         this.$Message.success(response.data.msg);
         this.roleModal =false;
      }else{
        this.$Modal.error({
            title: "错误",
            content: response.data.msg
        });
      }
    }).catch(error=>{
      this.$Modal.error({
            title: "错误",
            content: error
      });
    })

     
      //清空已有角色ID
      this.selectedRoleId=[]
    },
    //根据部门ID去查部门的人员
    getDeparentPeopleList(departmentId) {
      this.$ajax
        .post(
          "/api/user/selectByDepartmentId",
          `departmentId=${departmentId}`
        )
        .then(response => {
          //  console.log(response)
          if (response.data.code == 1) {
            this.deparentPeopleList = response.data.resdata.list;
          } else {
            this.$Modal.error({
              title: "错误",
              content: response.data.msg
            });
          }
        })
        .catch(error => {
          this.$Modal.error({
            title: "错误",
            content: error
          });
        });
    },
    //管理部门
    getCheckedNodes(){
       
       let getCheckedNodes = this.$refs.tree2.getCheckedNodes();
       //console.log(getCheckedNodes)
       
      getCheckedNodes.forEach((item)=>{
     
        this.checkedDeparmentId.push(item.departmentId)

      })
      //console.log(this.checkedDeparmentId)
      this.$ajax.post("/api/user/managerDepartment",`userId=${this.manageDepartmentId}&departmentIds=${this.checkedDeparmentId}`)
      .then(response=>{
       // console.log(response.data)
        if(response.data.code==1){
          this.$Message.success(response.data.msg);
          this.manageDepartmentModal =false;
          this.$refs.tree2.setCheckedKeys([]);
          this.checkedDeparmentId=[]
          
         
        }else{
          this.$Modal.error({
            title: "错误",
            content: response.data.msg
          });
        }
      }).catch(error => {
          this.$Modal.error({
            title: "错误",
            content: error
          });
        });

        
    },
    //重新去赋值
    setCheckedKeys(){
     
       this.$refs.tree2.setCheckedKeys(this.showSelectedRoleId);
    },
    getUserManagerDeparment(params){
       return new Promise((resolve, reject) => {
              this.$ajax.post("/api/user/selectUserManageDepartment",`userId=${params.row.userId}`)
              .then(response=>{
               // console.log(response.data)
                if(response.data.code==1){
                    
                    this.showSelectedRoleId = response.data.resdata;
                    resolve(true)
         
                }else{
                  this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                  });
                }
 
              }).catch(error=>{
                this.$Modal.error({
                    title: "错误",
                    content: error
                  });
              })
       })
    },
    //获取某个用户详细信息
    getserInfo(userId){
      return new Promise((resolve, reject) => {
      this.$ajax.post("/api/user/selectByUserId",`userId=${userId}`)
      .then(response=>{
       // console.log(response.data)
        if(response.data.code==1){
          this.userInfo = response.data.resdata;
          if(!!response.data.resdata.field1){
            this.editSelectList = response.data.resdata.field1.split(",")
          }
          
          this.userInfo.superiorUserId = response.data.resdata.superiorUserId;
          resolve(true)


        }else{
          this.$Modal.error({
              title: "错误",
              content: response.data.msg
          });
        }
      }).catch(error=>{
        this.$Modal.error({
                    title: "错误",
                    content: error
                  });

      })
      })
    },
    //提交表单并验证
    submitEmployee(name) {
     // console.log(name)     
     // console.log(this.selectDeparmentList)
      if(name=='employeeInfo'){
        this.employeeInfo.field1 = this.selectDeparmentList.join(',')
      
      this.$refs[name].validate(valid => {
        if (valid) {         
          this.$ajax
            .post("/api/user/save", this.employeeInfo)
            .then(response => {
             // console.log(response.data)
              if (response.data.code == 1) {
                this.$Message.success(response.data.msg);
                //重新更新左边树
                this.getTreeList()
                this.getEmployeeList(this.pageNum, this.rowsNum,'')
                
                //成功重置表单
                this.$refs[name].resetFields();
                this.employeeInfo.headImage = "";
                this.selectDeparmentList = [];

                this.addEmployeeModal = false;
              } else {
                this.addEmployeeModal = true;
                this.$Modal.error({
                  title: "错误",
                  content: response.data.msg
                });
              }
            })
            .catch(error => {
              this.$Modal.error({
                title: "错误",
                content: error
              });
            });
        } else {
         // this.$Message.error("表单验证失败!");
        }
      });
      }else if(name=="userInfo"){
        this.userInfo.field1 = this.editSelectList.join(',')
     
      this.$refs[name].validate(valid => {
        if (valid) {         
          this.$ajax
            .post("/api/user/save", this.userInfo)
            .then(response => {
              // console.log(response.data)
              if (response.data.code == 1) {
                this.$Message.success(response.data.msg);
                               
                this.editEmployeeModal = false;
              } else {
                this.editEmployeeModal = true;
                this.$Modal.error({
                  title: "错误",
                  content: response.data.msg
                });
              }
            })
            .catch(error => {
              this.$Modal.error({
                title: "错误",
                content: error
              });
            });
        } else {
         // this.$Message.error("请完善内容!");
        }
      })
      }
      
    },
    //删除用户
    remove(params) {
      //this.data6.splice(index, 1);
    //  console.log(params.row.userId);
      this.$Modal.confirm({
        title: "警告",
        content: "<p>确定哟啊删除吗？删除后将无法恢复 !</p>",
        onOk: () => {
          //this.data6.splice(index, 1);
          this.$ajax
            .post("/api/user/delete", `userId=${params.row.userId}`)
            .then(response => {
             // console.log(response);
              if (response.data.code == 1) {
                this.employeeList.splice(params.index, 1);
                this.$Message.success(response.data.msg);
                //重新查询左侧树
                this.getTreeList()
                this.getEmployeeList(this.pageNum, this.rowsNum, '');
              }
            })
            .catch(error => {
              this.$Modal.error({
                title: "错误",
                content: error
              });
            });
        },
        onCancel: () => {}
      });
    },
    //页码改变分页查询
    changePage(data) {   

      this.getEmployeeList(data, this.rowsNum, this.searchValue);
      
    },

    ok() {
      this.$Message.info("点击了确定");
    },
    cancel() {
      this.$Message.info("点击了取消");
    },
    //选择角色
    chooseRole(index, item) {
      this.roleInfoList.push(item);     
      this.noRoleInfos.splice(index, 1);
    },
    //移除角色
    removeRole(index, item) {
      this.noRoleInfos.push(item);
      this.roleInfoList.splice(index, 1);
    },

    //上传模板成功
    uploadTempleatSuccess(response, file, fileList) {
      //console.log(response);
      if(response.code==1){
        // console.log()
        //     if(response.resdata.成功添加人数==0){
        //       this.$Modal.error({
        //         content:"添加失败用户人数:"+ response.resdata.添加失败用户.length +  "请核对表格人员信息！"
        //       });
        //     }else{
        //       this.$Modal.success({
        //         content:"成功添加人数:"+ response.resdata.成功添加人数
        //       });

        //       this.getTreeList()
        //       this.getEmployeeList(this.pageNum, this.rowsNum, "");
        //     }
        if(response.resdata.成功添加人数==0){
          this.$Modal.error({
                content:"添加失败用户人数:"+ response.resdata.添加失败用户.length +  "请核对表格人员信息！"
          });
        }else if(response.resdata.添加失败用户==0){
          this.$Modal.success({
               content:"成功添加人数:"+ response.resdata.成功添加人数
               });
        }else{
          this.$Modal.warning({
          content:`成功添加人数:${response.resdata.成功添加人数},添加失败用户人数:${response.resdata.添加失败用户.length},请核对表格人员信息！`
        });
        }
        
      this.getTreeList()
      this.getEmployeeList(this.pageNum, this.rowsNum, "");
      }else{
        this.$Modal.error({
        content: response.msg
      });
      }
      // console.log(fileList);
      
    },
    uploadError(error) {
      // console.log(error);
      this.$Modal.error({
         title: "错误",
        content: '上传失败,请重试!'
      });
    },
    handleFormatError(fileList) {
      //文件格式错误
      // console.log(fileList);

      this.$Modal.error({
        content: "<p>文件格式不正确!</p>"
      });
    },
    handleMaxSize(file) {
      //文件大小验证
      //console.log(file);

      this.$Modal.error({
        content: "<p>文件大小不能超过5MB!</p>"
      });
    },
    picFormatError() {
      //头像格式错误
      this.$Modal.error({
        content: "<p>格式不正确!图片格式只能为jpg,jpeg,png</p>"
      });
    },
    //获取选中的管理部门
    
    //树形搜索
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
   
  }
};
</script>

<style>
.el-tree-node__content span{
  
    font-size:14px
  
}
.teshu>label:before{
    content: '*';
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: #ed3f14;
}
.manageDepartment .ivu-modal-content{
  max-height: 700px;
  overflow-y:scroll;
}

</style>
